<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
		"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>dijit/place unit test</title>

	<script src="boilerplate.js"></script>

	<style type="text/css">
		html {
			overflow: hidden; /* ie6 needs this */
		}
		body {
			height: 100%;
			padding: 0;
			margin: 10px; /* negative test for #16148; shouldn't affect placement unless body position relative/absolute */
			border: 0;
		}

		.aroundNode {
			position: absolute;
			width: 20px;
			height: 20px;
			background: yellow;
		}

		#popup {
			position: absolute;
			width: 75px;
			background: blue;
			color: white;
		}
	</style>

	<script type="text/javascript">
		require([
			"doh/runner",
			"dojo/dom", "dojo/dom-geometry", "dojo/window",
			"dijit/place", "dojo/domReady!"
		], function(doh, dom, domGeometry, winUtils, place){

			// The around nodes
			var aroundTop = dom.byId("aroundTop"),
				aroundBottom = dom.byId("aroundBottom"),
				aroundLeft = dom.byId("aroundLeft"),
				aroundRight = dom.byId("aroundRight");

			// The popup (aka dropdown)
			var popup = dom.byId("popup");

			doh.register("at", [
				function atTL(t){
					// Place popup at (10,7)... place.at() should choose the top-left corner, because
					// any of the other corner would make the popup go partially off the screen
					var ret = place.at(popup, {x: 10, y:7}, ["TR", "BR", "BL", "TL"]);

					doh.is("TL", ret.corner, "top left corner chosen");
					doh.is("10px", popup.style.left, "x coord");
					doh.is("7px", popup.style.top, "y coord");
					doh.is(75, ret.w, "it's 75px wide");
				},
				function atTooltip(t){
					// Same as above test except that shape of drop down changes depending on where it's positioned.
					// Simulates tooltip placement (tooltip shape changes b/c of the arrow).

					function layoutNode(node, aroundCorner, nodeCorner){
						node.style.width = (nodeCorner == "TL" ? "80px" : "75px");
					}
					var ret = place.at(
							popup,
							{x: 10, y: 7},		// center of aroundNode
							["TR", "BR", "BL", "TL"],
							{x: 5, y: 5},		// half of width and height of aroundNode
							layoutNode
					);

					doh.is("TL", ret.corner, "popup's corner");
					doh.is("BR", ret.aroundCorner, "around corner");
					doh.is("80px", popup.style.width, "layout node width");
					popup.style.width = "75px";
				},
				function atTR(t){
					// Place popup at top right... place.at() should choose the top-right corner, because
					// any of the other corner would make the popup go partially off the screen
					var viewport = winUtils.getBox(),
						ret = place.at(popup, {x: viewport.w-10, y:7}, ["TL", "BR", "TR", "BL"]),
						popupCoords = domGeometry.position(popup);

					doh.is("TR", ret.corner, "top left corner chosen");
					doh.is(viewport.w-10, popupCoords.x + popupCoords.w, "x coord");
					doh.is("7px", popup.style.top, "y coord");
					doh.is(75, ret.w, "it's 75px wide");
				}
			]);

			doh.register("around", [
				function aroundT(t){
					// Dropdown from "aroundTop" node. Should pick the second choice, since the first
					// goes off screen.
					var ret = place.around(popup, aroundTop, [
						"above",	// aroundTop's top-left corner with the popup's bottom-left corner (fails)
						"below",	// aroundTop's bottom-left corner with the popup's top-left corner (works)
						"below-alt"	// aroundTop's bottom-right corner with the popup's top-right corner (works)
					], true);

					doh.is("BL", ret.aroundCorner, "around corner");
					doh.is("TL", ret.corner, "popup's corner");
					doh.is("20px", popup.style.top, "underneath around node");
					doh.is(Math.round(domGeometry.position(aroundTop).x), Math.round(popup.style.left.replace("px", "")),
							"left sides aligned");
				},
				function aroundTooltip(t){
					// Same as above test except that shape of drop down changes depending on where it's positioned.
					// Simulates tooltip placement (tooltip shape changes b/c of the arrow).
					// Should pick the third choice this time

					function layoutNode(node, aroundCorner, nodeCorner){
						node.style.width = (nodeCorner == "TL" ? "5000px" : "75px");
					}
					var ret = place.around(popup, aroundTop, [
						"above",	// aroundTop's top-left corner with the popup's bottom-left corner (fails)
						"below",	// aroundTop's bottom-left corner with the popup's top-left corner (works)
						"below-alt"	// aroundTop's bottom-right corner with the popup's top-right corner (works)
					], true, layoutNode);

					doh.is("BR", ret.aroundCorner, "around corner");
					doh.is("TR", ret.corner, "popup's corner");
					doh.is("20px", popup.style.top, "underneath around node");
					doh.is(Math.round(domGeometry.position(aroundTop).x+domGeometry.position(aroundTop).w),
						Math.round(domGeometry.position(popup).x+domGeometry.position(popup).w),
						"right sides aligned");
				},
				function aroundB(t){
					// Dropdown from "aroundBottom" node. Should go above aroundNode so that
					// popup doesn't go offscreen
					var ret = place.around(popup, aroundBottom, [
						"below",	// aroundBottom's bottom-left corner with the popup's top-left corner (fails)
						"above",	// aroundBottom's top-left corner with the popup's bottom-left corner (works)
						"below-alt"	// aroundBottom's bottom-right corner with the popup's top-right corner (fails)
					], true);

					doh.is("TL", ret.aroundCorner, "around corner");
					doh.is("BL", ret.corner, "popup's corner");
					doh.is(Math.round(domGeometry.position(aroundBottom).y),
							Math.round(domGeometry.position(popup).y + domGeometry.position(popup).h), "above around node");
				},
				function aroundBM(t){
					// bottom middle popup from "aroundBottom" node
					var ret = place.around(popup, aroundBottom, [
						"above-centered",	// aroundBottom's top-middle with the popup's bottom-middle (works)
						"below-centered"	// aroundBottom's bottom-middle with the popup's top-middle (fails)
					], true);

					doh.is("TM", ret.aroundCorner, "around middle");
					doh.is("BM", ret.corner, "popup's middle");
					var popupPos = domGeometry.position(popup);
					var aroundPos = domGeometry.position(aroundBottom);
					doh.is(Math.round(aroundPos.y), Math.round(popupPos.y + popupPos.h), "above around node");
					doh.t(aroundPos.x > popupPos.x, "starts before around node");
					doh.t(aroundPos.x < (popupPos.x + popupPos.w), "ends after around node");
				},
				function aroundTM(t){
					// top middle popup from "aroundTop" node
					var ret = place.around(popup, aroundTop, [
						"above-centered",	// aroundTop's top-middle with the popup's bottom-middle (fails)
						"below-centered"	// aroundTop's bottom-middle with the popup's top-middle (works)
					], true);

					doh.is("BM", ret.aroundCorner, "around middle");
					doh.is("TM", ret.corner, "popup's middle");
					var popupPos = domGeometry.position(popup);
					var aroundPos = domGeometry.position(aroundTop);
					doh.is(Math.round(aroundPos.y + aroundPos.h), Math.round(popupPos.y), "below around node");
					doh.t(aroundPos.x > popupPos.x, "starts before around node");
					doh.t(aroundPos.x < (popupPos.x + popupPos.w), "ends after around node");
				},
				function aroundML(t){
					// middle left popup from "aroundLeft" node
					var ret = place.around(popup, aroundLeft, [
						"after-centered",	// aroundLeft's middle-right with the popup's middle-left (works)
						"before-centered"	// aroundLeft's middle-left with the popup's middle-right (fails)
					], true);

					doh.is("MR", ret.aroundCorner, "around middle");
					doh.is("ML", ret.corner, "popup's middle");
					var popupPos = domGeometry.position(popup);
					var aroundPos = domGeometry.position(aroundLeft);
					doh.is(Math.round(aroundPos.x + aroundPos.w), Math.round(popupPos.x), "after around node");
					doh.t(aroundPos.y > popupPos.y, "starts before around node");
					doh.t(aroundPos.y < (popupPos.y + popupPos.h), "ends after around node");
				},
				function aroundMR(t){
					// middle left popup from "aroundRight" node
					var ret = place.around(popup, aroundRight, [
						"after-centered",	// aroundRight's middle-right with the popup's middle-left (fails)
						"before-centered"	// aroundRight's middle-left with the popup's middle-right (works)
					], true);

					doh.is("ML", ret.aroundCorner, "around middle");
					doh.is("MR", ret.corner, "popup's middle");
					var popupPos = domGeometry.position(popup);
					var aroundPos = domGeometry.position(aroundRight);
					doh.is(Math.round(popupPos.x + popupPos.w), Math.round(aroundPos.x), "before around node");
					doh.t(aroundPos.y > popupPos.y, "starts before around node");
					doh.t(aroundPos.y < (popupPos.y + popupPos.h), "ends after around node");
				},
				function aroundMLB(t){
					// This will put the drop-down below the "aroundLeft" node, first trying to right-align
					// but since that doesn't work then trying to left-align.
					var ret = place.around(popup, aroundLeft, ["below-alt"], true);

					doh.is("BL", ret.aroundCorner, "around left");
					doh.is("TL", ret.corner, "popup's left");
					var popupPos = domGeometry.position(popup);
					var aroundPos = domGeometry.position(aroundLeft);
					doh.is(Math.round(aroundPos.y + aroundPos.h), Math.round(popupPos.y), "below around node");
					doh.is(aroundPos.x, popupPos.x, "left aligned with around node");
				},
				function aroundMRT(t){
					// This will put the drop-down above the "aroundRight" node, first trying to left-align
					// but since that doesn't work then trying to right-align.
					var ret = place.around(popup, aroundRight, ["above"], true);

					doh.is("TR", ret.aroundCorner, "around right");
					doh.is("BR", ret.corner, "popup's right");
					var popupPos = domGeometry.position(popup);
					var aroundPos = domGeometry.position(aroundRight);
					doh.is(Math.round(popupPos.x + popupPos.w), Math.round(aroundPos.x + aroundPos.w),
							"right aligned with around node");
					doh.is(Math.round(popupPos.y + popupPos.h), Math.round(aroundPos.y),
							"above around node");
				}
			]);

			doh.run();
		});

	</script>
</head>
<body>
	<h1>Dijit Place Unit Test</h1>
	<div id="aroundTop" class="aroundNode" style="top: 0; left: 50%">T</div>
	<div id="aroundLeft" class="aroundNode" style="bottom: 30%; left: 0;">L</div>
	<div id="aroundRight" class="aroundNode" style="bottom: 30%; right: 1px;">R</div>
	<div id="aroundBottom" class="aroundNode" style="bottom: 5px; left: 50%;">B</div>

	<div id="popup">
		I'm a drop down, wider and taller than the around nodes I'm placed next to.
	</div>
</body>
</html>
